<template>
	<div class="login-account">
		<el-form
				ref="ruleFormRef"
				style="max-width: 600px"
				:model="ruleForm"
				:rules="rules"
				label-width="auto"
				class="demo-ruleForm"
				hide-required-asterisk
		>
			<el-form-item label="账号" prop="username">
				<el-input v-model="ruleForm.username" clearable maxlength="20" show-word-limit/>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="ruleForm.password" type="password" clearable minlength="6" maxlength="20"
				          show-password/>
			</el-form-item>
			<el-form-item label="验证码" prop="code">
				<el-input v-model="ruleForm.checkCode" clearable style="width: 75%; margin-right: 8px;" maxlength="6"
				          show-word-limit/>
<!--				<el-image src="/assets/img/demo1.png" alt="加载失败"></el-image>-->
				<img class="img" src="@/assets/img/demo1.png" alt="加载失败" style="width: 20%"/>
<!--				<el-image :src="ruleForm.codeUrl" alt="加载失败"></el-image>-->
			</el-form-item>
			<div class="controls">
				<el-checkbox v-model="ruleForm.isRememberPwd" label="记住密码" size="large"/>
				<el-link type="primary">忘记密码</el-link>
			</div>
			<el-form-item>
				<el-button class="login-btn" type="primary" size="large" @click="submitForm(ruleFormRef)">登 录
				</el-button>
			</el-form-item>
		
		</el-form>
	</div>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { reqAccountLogin } from '@/service/login/login'
import router from '@/router'
import { errorMessage, successMessage } from '@/utils/ElMessageUtils.ts'
import { LocalStorageUtils } from '@/utils/StorageUtils.ts'

// 表单数据。
const ruleForm = reactive({
	username: '',
	password: '',
	checkCode: '',
	codeUrl: '/assets/img/demo1.png',
	// 是否记住密码。
	isRememberPwd: false
})
const ruleFormRef = ref<FormInstance>()


const rememberPwdData = LocalStorageUtils.getKey('wisdomRememberPwd')
// console.log('rememberPwdData ====> ', rememberPwdData)
// 勾选记住密码。
if (rememberPwdData) {
	// console.log('勾选了记住密码！！！！！！！！！！！！！！')
	ruleForm.username = rememberPwdData.username
	ruleForm.password = rememberPwdData.password
	ruleForm.isRememberPwd = rememberPwdData.isRememberPwd
}

// 校验账号
const checkUsername = (rule: any, value: any, callback: any) => {
	if (value === '') {
		return callback(new Error('请输入账号'))
	} else {
		callback()
	}
}
//校验密码
const validatePassword = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请输入密码'))
	} else {
		callback()
	}
}
//校验验证码
const validateCode = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请输入密码'))
	} else {
		callback()
	}
}

//校验规则
const rules = reactive<FormRules<typeof ruleForm>>({
	username: [{ required: true, validator: checkUsername, trigger: 'blur' }],
	password: [
		{ required: true, validator: validatePassword, trigger: 'blur' },
		{ min: 6, max: 20, message: '密码长度范围6-20字符', trigger: 'blur' }
	],
	checkCode: [
		{ required: true, validator: validateCode, trigger: 'blur' },
		{ min: 4, max: 6, message: '验证码长度范围4-6字符', trigger: 'blur' }
	]
})


//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			// console.log('提交！     ruleForm  ==> ', ruleForm)
			reqAccountLogin(ruleForm).then(response => {
				console.log('提交！     response ==========> ', response)
				if (response.resultStatus) {
					successMessage(true, '登录成功！')
					console.log("reqAccountLogin.token ===> ",response.resultData.token)
					console.log("token before ===> ",LocalStorageUtils.getKey('wisdomToken'))
					LocalStorageUtils.setKey('wisdomToken', response.resultData.token)
					LocalStorageUtils.setKey('wisdomUserInfo', response.resultData.userInfo)
					console.log("token after ===> ",LocalStorageUtils.getKey('wisdomToken'))
					// 记住密码。
					if (ruleForm.isRememberPwd) {
						LocalStorageUtils.setKey('wisdomRememberPwd', {
							username: ruleForm.username,
							password: ruleForm.password,
							isRememberPwd: ruleForm.isRememberPwd
						})
					} else {
						LocalStorageUtils.removeKey('wisdomRememberPwd')
					}
					console.log("去：/main 页面！")
					router.push('/main')
				} else {
					console.log('登录失败！！')
					errorMessage(true, '登录失败！！')
				}
			})
		} else {
			console.log('错误提交!')
		}
	})
}

</script>

<style scoped lang="less">

.controls {
	margin-top: 12px;
	display: flex;
	justify-content: space-between;
}

.login-account {
	color: white;
}

.login-btn {
	margin-top: 10px;
	width: 100%;
}
</style>